<template>
    <div>
    <el-button type="primary" @click="dialogFormVisible = true;operataType = 'save'" style="margin-bottom: 20px;">
        添加用户
    </el-button>

        <el-input v-model="user_name" placeholder="请输入内容" style="width: 300px;margin-left: 20px;"></el-input>
    <el-button class="el-button1" type="primary" @click="loadUsers">提交</el-button>

      <el-dialog title="用户信息" :visible.sync="dialogFormVisible" @close="handleClose">
      <el-form :model="user">
          <el-form-item label="用户账号" v-if="operataType != 'password'">
          <el-input v-model="user.user_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户密码" v-if="operataType != 'update'">
          <el-input v-model="user.user_pwd" show-password auto-complete="off" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户类型" v-if="operataType != 'password'">
            <el-select v-model="user.user_type" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.label"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
      </el-dialog>
      <!-- 数据表格 -->
      <el-table
        border
        stripe
        :data="users"
        max-height="500"
        style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="用户ID" width="180">
          <template slot-scope="scope">
              <span >{{ scope.row.user_id }}</span>
          </template>
      </el-table-column>
      <el-table-column label="用户名称" width="160">
          <template slot-scope="scope">
              <span >{{ scope.row.user_name }}</span>
          </template>
      </el-table-column>
      <el-table-column label="用户密码">
        <template slot-scope="scope">
            <span >{{ scope.row.user_pwd }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户类型" width="100">
        <template slot-scope="scope">
            <span >{{ scope.row.user_type ? "前台用户" : "后台用户" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="250">
        <template slot-scope="scope">
          <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
          size="mini"
          @click="handlePassword(scope.$index, scope.row)">修改密码</el-button>
          <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
     <!-- 分页组件 -->
    <el-pagination
        style="margin-top: 20px;"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size = "pageSize"
        :current-page ="current"
        @current-change="loadUsers">
    </el-pagination>
</div>
</template>
<script>
    export default {
        name: "UserView",
        data() {
            return {
                //商品列表
                users: [],
                dialogFormVisible:false, //控制对话框的显示
                formLabelWidth:'120px',
                user:{user_name:'',user_pwd:'',user_type:0},//用户数据
                user_name: '',
                operataType:'',//操作类型  save  update
                total:0,//用户总数
                pageSize:10,//每页行数
                current:0,//当前页数
                options: [
                    {
                        value: 0,
                        label: '后台用户'
                    }, 
                    {
                        value: 1,
                        label: '前台用户',
                    }
                ],
            }
        },
        methods:{
            //读取用户
            loadUsers(current){
                if(typeof current === 'number') {
                    this.current = current
                }else {
                    this.current = 1
                }
                this.$http.post('user?action=page', this.$qs.stringify({ 
                    pageSize: this.pageSize,
                    currentPage: this.current,
                    user_name: this.user_name
                })).then(resp => {
                    //数据绑定
                    if(resp.data.data){
                        this.total = resp.data.data.total
                        this.users = resp.data.data.records
                    }
                })
                this.user_name = ''
            },
            // 编辑用户
            handleEdit(index, row) {
                this.operataType = 'update';
                //显示对话框，绑定数据
                this.dialogFormVisible = true;
                //进行深克隆 row-->Strign-->json
                this.user = JSON.parse(JSON.stringify(row));
                // this.user.user_pwd = '';
            },
            // 编辑密码
            handlePassword(index, row) {
                this.operataType = 'password';
                //显示对话框，绑定数据
                this.dialogFormVisible = true;
                //进行深克隆 row-->Strign-->json
                this.user = JSON.parse(JSON.stringify(row));
                this.user.user_pwd = '';
            },
            //保存数据操作
            handleSave(){
                if(this.operataType == 'save'){
                    //添加用户操作
                    console.log('save user')
                    this.$http.post('/user?action=save',this.$qs.stringify(this.user))
                        .then(resp => {
                            console.log('save user',resp.data)
                            if(resp.data.data == true){
                                this.loadUsers(this.current);
                            }
                        })
                }else{
                    //更新用户操作
                     this.$http.post('/user?action=update',this.$qs.stringify(this.user))
                        .then(resp => {
                            console.log('update user',resp.data)
                            if(resp.data.data == true){
                                this.loadUsers(this.current);
                            }
                        })
                }
                this.dialogFormVisible = false
            },
            handleDelete(index, row) {
                this.$confirm('是否确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.$http.post('/user?action=delete&user_id=' + row.user_id).then(resp =>{
                            if(resp.data.data == true){
                                this.loadUsers(this.current);
                                this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            }
                        })
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                    });
            },
            //对话框关闭
            handleClose(){
                this.user = {user_id:'',user_name:'',user_pwd:'',user_type:0}
                this.operataType = ''
            }
        },
        //页面挂载钩子
        mounted(){
            this.loadUsers(1)
        }
    }
</script>
